<template>
  <div class="login">
    <div class="item_input">
      <span v-if="phone" class="title_name">手机号</span>
      <input type="text" v-model="phone" placeholder="请输入手机号">
    </div>
    <!--<div class="item_input">
      <span v-if="code" class="title_name">图像验证码</span>
      <input type="text" v-model="imgCode" placeholder="请输入图像验证码">
      <img :src="captchaPath" alt="" @click="getCaptcha">
    </div>-->
    <div class="item_input">
      <span v-if="code" class="title_name">验证码</span>
      <input type="text" v-model="code" placeholder="请输入验证码">
      <button @click="getTime" :disabled="codeText === '获取验证码'? false: true" :style="{backgroundColor: (codeText === '获取验证码'? '#027FFE': '#999999')}">{{codeText}}</button>
    </div>
    <button :class="(phone !== '' && code !== '') ? 'login_btn active' : 'login_btn'" :disabled="!(phone !== '' && code !== '')" @click="setLogin">登录</button>
    <p class="serve_text">点击按钮表示同意 <a href="http://gkapi.oucnet.com/static/lmy/guokai.htm">《用户使用条款》</a></p>
  </div>
</template>
<script>
import { isMobile } from '@/utils/validate'
import { getUUID } from '@/utils'
import md5 from 'js-md5'
export default {
  name: 'login',
  components: {},
  data () {
    return {
      openid: '',
      captchaPath: '',
      serveTime: 0,
      phone: '',
      imgCode: '',
      code: '',
      codeText: '获取验证码',
      nickname: '',
      avatar: '',
      setIntervalTime: null
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/7/16 0016 17:26
     *@function  获取图片验证码
     *****************************************/
    getCaptcha () {
      this.captchaPath = `${window.SITE_CONFIG['personalURL']}/captcha?${getUUID()}`
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/29 0029 9:33
     *@function  获取时间戳
     *****************************************/
    getTime () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/time`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        this.serveTime = res.data
        this.getCode()
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/16 0016 17:13
     *@function  获取验证码
     *****************************************/
    getCode () {
      if (!isMobile(this.phone)) {
        this.$toast('手机号格式有误')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/sentSms`,
        method: 'post',
        data: {
          phone: this.phone,
          sign: md5(this.phone + 'wxPhoneSms' + this.serveTime),
          time: this.serveTime
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 202) {
          this.$toast('验证码错误')
          return false
        }
        if (res.status === 203) {
          this.$toast('请勿重复发送')
          this.getCaptcha()
          return false
        }
        if (res.status !== 200) {
          this.$toast('验证码发送失败')
          return false
        }
        var _this = this
        var timeNumber = 60
        this.$toast('验证码已发送')
        this.setIntervalTime = setInterval(function () {
          _this.codeText = `${timeNumber}s重新发送`
          if (timeNumber <= 0) {
            _this.codeText = '获取验证码'
            clearInterval(_this.setIntervalTime)
          }
          timeNumber--
        }, 1000)
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/16 0016 17:02
     *@function  登录
     *****************************************/
    setLogin () {
      if (!isMobile(this.phone)) {
        this.$toast('手机号格式有误')
        return false
      }
      if (!this.code) {
        this.$toast('请输入手机验证码')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/userWebReg`,
        method: 'post',
        data: {
          phone: this.phone,
          phoneCode: this.code,
          openId: this.$store.state.openid,
          gsign: this.$store.state.gsign,
          nickname: this.$store.state.personal.nickname,
          avatar: this.$store.state.personal.avatar,
          activityId: this.$store.state.personal.activityId,
          activityName: this.$store.state.personal.activityName
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 202) {
          this.$toast('验证码错误')
          this.getCaptcha()
          return false
        }
        if (res.status !== 200) {
          this.$toast('绑定失败,请重试')
          this.getCaptcha()
          return false
        }
        this.$store.state.personal.phone = res.data.phone
        this.$store.state.personal.userData = res.data
        localStorage.setItem('stateData', JSON.stringify(this.$store.state))
        var _this = this
        this.$toast('绑定成功')
        setTimeout(function () {
          if (_this.$route.query.backurl) {
            window.location.href = `${decodeURIComponent(_this.$route.query.backurl)}&isLogin=true`
          } else {
            if (res.data.is_student === 1) { // 学员
              _this.$router.push({ path: '/personal-student' })
            } else {
              _this.$router.push({ path: '/personal-member' })
            }
          }
        }, 1000)
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .login {
    padding: 200px 60px;
    text-align: center;
    .item_input{
      height: 120px;
      border-bottom: 1px solid #E5E5E5;
      padding: 40px 0;
      position: relative;
      display: flex;
      margin-bottom: 50px;
      .title_name{
        font-size: 24px;
        color: #DDDDDD;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
        transition: all 0.6s;
      }
      input{
        border: 0;
        width: 100%;
        height: 56px;
        font-size: 36px;
        background: transparent;
        color: #222222;
        &::placeholder{
          font-size: 36px;
          color: #DDDDDD;
        }
      }
      img{
        width: 200px;
        height: 56px;
        background-color: #efefef;
      }
      button{
        width: 200px;
        height: 56px;
        background: #027FFE;
        border-radius: 28px;
        font-size: 24px;
        color: #FFFFFF;
        border: 0;
        padding: 0;
      }
    }
    .serve_text{
      text-align: center;
      color: #dddddd;
      font-size: 28px;
      a{
        color: #333333;
      }
    }
    .login_btn{
      background: #DDDDDD;
      border-radius: 4px;
      height: 100px;
      width: 630px;
      border: 0;
      margin: 40px auto 30px;
      font-size: 36px;
      color: #FFFFFF;
    }
    .active{
      background: #027FFE;
    }
  }
</style>
